<script setup>
import { ref, onMounted, unref} from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue';
import {addSupplierService, deleteSupplierService, getSupplierService, updateSupplierService} from "@/apis/supplier.js";
import {ElMessage} from "element-plus";


const supplierForm = ref()
const dialogFormVisible = ref(false)
const form = ref({
  supplierId: null,
  companyName: "",
  contactPerson: "",
  contactTitle: "",
  address: "",
  phone: "",
  email: ""
})

const addOrEdit = ref('')

const supplierTableData = ref([])
const total = ref(0)
const searchInfo = ref({
  page: 1,
  pageSize: 10,
  companyName: "",
  contactPerson: "",
  phone: ""
})
const getAllSupplier = async () => {
  const res = await getSupplierService(searchInfo.value)
  console.log(res);
  supplierTableData.value = res.data.records
  total.value = res.data.total
}
const handleReset = () => {
  searchInfo.value = {}
  getAllSupplier()
}
const handlePageChange = (page) => {
  searchInfo.value.page = page
  getAllSupplier()
}

const del = async (id) => {
  const res = await deleteSupplierService(id)
  if (res.code === 200) {
    supplierTableData.value = supplierTableData.value.filter(item=> item.supplierId !== id )
    ElMessage.success('删除成功')
  } else {
    ElMessage.error('删除失败')
  }
}

const deleteDialog = async (id) => {
  ElMessageBox.confirm(
    '是否删除？',
    '提示',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(  rs => del(id))
    .catch(err => void 0)
}

const save = async () => {
  let res
  if (addOrEdit.value === 'edit') {
    res = await updateSupplierService(form.value.supplierId, form.value)
  } else if (addOrEdit.value === 'add') {
    res = await addSupplierService(form.value)
  } else {
    return false
  }

  if (res.code === 200) {
    ElMessage.success('操作成功')
    dialogFormVisible.value = false
    await getAllSupplier()
  } else {
    ElMessage.error('服务器错误')
  }
}

const add = () => {
  addOrEdit.value = 'add'
  dialogFormVisible.value = true
}

const edit = (row) => {
  addOrEdit.value = 'edit'
  form.value = row
  dialogFormVisible.value = true
}

const resetForm = () => {
  form.value = {
    supplierId: null,
    companyName: "",
    contactPerson: "",
    contactTitle: "",
    address: "",
    phone: "",
    email: ""
  }
}

onMounted(() => {
  getAllSupplier()
})
</script>

<template>
  <el-container>
    <el-header>
      <el-form>
        <el-form-item>
          <span>供应商</span>
          <el-input v-model="searchInfo.companyName" style="width: 240px" placeholder="请输入供应商" />
        </el-form-item>

        <el-form-item>
          <span>手机号</span>
          <el-input v-model="searchInfo.phone" style="width: 240px" placeholder="请输入手机号" />
        </el-form-item>

        <el-form-item>
          <span>联系人</span>
          <el-input v-model="searchInfo.contactPerson" style="width: 240px" placeholder="请输入联系人" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getAllSupplier">
            <el-icon>
              <Search />
            </el-icon>搜索
          </el-button>
          <el-button @click="handleReset">
            <el-icon>
              <Refresh />
            </el-icon>重置
          </el-button>
          <el-button @click="add">
            新增
          </el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main v-if="supplierTableData.length !== 0">
      <el-table :data="supplierTableData" style="width: 100%"  height="auto">
        <el-table-column prop="supplierId" label="供应商ID">
        </el-table-column>

        <el-table-column prop="companyName" label="供应商名" width="160" />

        <el-table-column prop="contactPerson" label="联系人" width="120">
        </el-table-column>

        <el-table-column prop="contactTitle" label="职位" width="150">
        </el-table-column>

        <el-table-column prop="address" label="地址" width="120" />
        <el-table-column prop="phone" label="电话" width="120" />
        <el-table-column prop="email" label="邮箱" width="120" />

        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button link type="danger" size="small" @click="deleteDialog(scope.row.supplierId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer v-if="supplierTableData.length !== 0">
      <el-pagination background layout="prev, pager, next" :total="total" @change="handlePageChange" />
    </el-footer>
    <EmptyData v-else @reset="handleReset" />


    <el-dialog @close="resetForm" v-model="dialogFormVisible" title="Shipping address" width="500">
      <el-form ref="supplierForm" :model="form">
        <el-form-item label="供应商名" >
          <el-input v-model="form.companyName" clearable autocomplete="off" />
        </el-form-item>

        <el-form-item label="联系人">
          <el-input v-model="form.contactPerson" clearable autocomplete="off" />
        </el-form-item>

        <el-form-item label="职位">
          <el-input v-model="form.contactTitle" clearable autocomplete="off" />
        </el-form-item>

        <el-form-item label="地址">
          <el-input v-model="form.address" clearable autocomplete="off" />
        </el-form-item>

        <el-form-item label="电话">
          <el-input v-model="form.phone" clearable autocomplete="off" />
        </el-form-item>

        <el-form-item label="邮箱">
          <el-input v-model="form.email" clearable autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="save">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>
<style scoped lang="scss">
@import url("@/assets/style/manage.scss");
</style>
